
<template>
  <div class="page">
    <div class='page-search'>
      <div class="search-div"  @click="search">
        <div class="search-tip-input">
          <div class="search-key">{{searchKey ? searchKey : '搜索你想要的商品'}}</div>
        </div>
      </div>
      <div class="give-up-search" @click="closeSearch">取消</div>
    </div>
    <div class="no-goods" v-if="goodsInfo.length == 0" >
      <img class="no-goods-image" src="../../assets/no-goods.png">
      <div class="no-goods-font">很抱歉，没有找到合适的商品</div>
    </div>
    <div v-if="goodsInfo.length != 0" class="goods-list">
      <div class="goods-list-filter-list">
        <div :class="['filter-item', filterType === ''?'color':'']" data-type="default" @click="checkFilterType">
          <div class="filter-item-font">综合排序</div>
        </div>
        <div :class="['filter-item', [1,2].includes(filterType) ?'color':'']" data-type="price" @click="checkFilterType">
          <div class="filter-item-font">价格</div>
          <img class="filter-item-image" src="../../assets/choose-filter-up.png" v-if="filterType === 1">
          <img class="filter-item-image" src="../../assets/choose-filter-down.png" v-if="filterType === 2">
          <img class="filter-item-image" src="../../assets/no-choose-filter.png" v-if="filterType !== 1 && filterType !== 2 ">
        </div>
        <div :class="['filter-item',[3,4].includes(filterType)?'color':'']" data-type="sale" @click="checkFilterType">
          <div class="filter-item-font">销量</div>
          <img class="filter-item-image" src="../../assets/choose-filter-up.png" v-if="filterType === 3">
          <img class="filter-item-image" src="../../assets/choose-filter-down.png" v-if="filterType === 4">
          <img class="filter-item-image" src="../../assets/no-choose-filter.png" v-if="filterType !== 3 && filterType !== 4">
        </div>
      </div>
      <div v-for="(item,index) in goodsInfo" :key="index">
        <router-link :to="'/goods/detail?id=' + item.productId" class="goods-item">
          <div class="goods-item-img">
            <img class="image" mode="aspectFit" :src="item.picUrl">
          </div>
          <div class="goods-item-info">
            <div class="goods-name">{{item.productName}}</div>
            <div class="goods-fee">￥{{item.productPrice}}</div>
            <div class="goods-real-fee">
              <div class="icon">￥</div>
              {{item.productPromotePrice}}
            </div>
          </div>
        </router-link>
      </div>
    </div>
  </div>
</template>
<script>
import { API } from '../../config'
export default {
  data (){
    return {
        searchKey: '',
        showInput: true,
        filterType: '',
        goodsInfo: [],
        isLoading: false,
        pageNum: 1,
        pageSize: 10,
        options:''
    }
  },
  methods:{
    closeSearch: function () {
      this.searchKey = ''
      this.showInput = false
      wx.navigateBack({delta: 1})
    },
    checkFilterType: function (e) {
      const type = e.currentTarget.dataset.type
      if (type === 'default') {
        this.filterType = ''
      } else if (type === 'price') {
        this.filterType = this.filterType === 1 ? 2 : 1
      } else if (type === 'sale') {
        this.filterType = this.filterType === 3 ? 4 : 3
      }
      this.getList()
    },
    // 跳转搜索页
    search() {
        let vm = this
        vm.$router.push({path: '/index/search?searchKey=' + this.searchKey})
    },
    initFun() {
        this.getList()
    },

    /**
     * 获取商品列表
     */
    getList(pageNum) {
    let vm = this
    vm.options = vm.$route.query
    const params = {
        pageNum: pageNum || 1,
        pageSize: vm.pageSize,
        ...vm.options,
        sortCondition: vm.filterType
    }
    if (params.categoryId) {
        params.categoryId = parseInt(params.categoryId)
    }
    let accesstoken = vm.getLocalStorage('accesstoken')
    vm.$axios.post(API + '/searchProduct',params,{
        headers: {'accesstoken': accesstoken}//设置header信息
    }).then((res) => {
        vm.goodsInfo = params.pageNum === 1 ? [] : vm.goodsInfo
        if (res.data.code === 200) {
            vm.goodsInfo = [...vm.goodsInfo, ...res.data.data.data]
        }
    })
    }

  },

  mounted() {
    this.initFun()
  }
}
</script>

<style lang='less' scoped>
@import '../../css/common.less';
@import '../../css/search.less';
page {
  background-color: #fff;
}
</style>
